﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{0}</title>
    <style type="text/css">
        body  {
            background-color:white;
            color:#000000;
            font-family: "Helvetica Neue", Helvetica, Verdana, Arial;
            margin: 0;
            font-size: 13px;
        }
        a#logo {
            position: absolute;
            top: 4px;
            right: 0;
            width: 50px;
            height: 50px;
            background-size: 42px 42px;
            background-repeat: no-repeat;
            background-image: url("{{serviceStackLogoDataUriLight}}");
        }
        .icons {
            display: block;
            float: right;
        }
        .auth {
            display: block;
            width: 17px;
            height: 17px;
            background-image: url();
        }
        h1 {
            color: #FFF;
            font-size: 26px;
            font-weight: normal;
            margin: 0;
            padding: 0 0 0 15px;
            line-height: 48px;
            min-height: 48px;
            border-radius: 0px;
            border-bottom: 1px solid #191e23;
            background: #2c3742; /* Old browsers */
            background: -moz-linear-gradient(top,  #2c3742 0%, #28303a 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c3742), color-stop(100%,#28303a)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #2c3742 0%,#28303a 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #2c3742 0%,#28303a 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #2c3742 0%,#28303a 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #2c3742 0%,#28303a 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3742', endColorstr='#28303a',GradientType=0 ); /* IE6-9 */
        }
        h2 {
            margin: 25px 0 20px 0;
            color: #29323D;
            font-family: 'Open Sans', sans-serif;
            font-size: 24px;
        }
        h3 {
            color: #29323D;
            font-size: 18px;
            font-family: 'Open Sans', sans-serif;
        }
        a {
            color: #428bca;
            font-weight: bold;
            text-decoration: none;
        }
        a:hover, a:focus {
            color: #2a6496;
            text-decoration: underline;
        }
        ul {
            margin: 10px 0 0 10px;
            padding: 0 0 0 10px;
        }
        li {
            clear: left;
            margin-top: 10px;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            margin: 0 0 20px 0;
        }
        table, tr, th, td {
            border: none;
        }
        .operations, .operation {
            padding: 0 0 0 15px;
        }
        /* All Operations */
        .operations table {
            margin-left: 1.5em;
        }
        .operations th {
            text-align: left;
            font-weight: normal;
            line-height: 18px;
            min-width: 27em;
            white-space: nowrap;
        }
        /* Single Operation */
        .operations td {
            font-size: 12px;
            line-height: 18px;
            font-weight: bold;
            color: #CCC;
            padding-left: 1.5em;
            vertical-align: top;
        }
        .operation caption {
            text-align: left;
            font-size: 14px;
            padding: 10px 0;
            white-space: nowrap;
        }
        .operation tbody th {
            text-align: left;
        }
        .operation thead th {
            text-align: left;
            text-transform: uppercase;
        }
        .operation th, .operation td {
            padding: 5px 15px;
            vertical-align: top;
        }
        .operation h4 {
            margin: 10px 0;
            padding: 0;
        }
        .operation li {
            margin: 0;
        }
        .example {
            padding-left: 15px;
        }
        .example h3 { 
            color:#000000;
            margin: 10px 0 0 -15px;
        }
        .example pre {
            background-color: #E5E5CC;
            border: 1px solid #F0F0E0;
            font-family: Courier New;
            font-size: 15px;
            padding: 5px;
            margin-right: 15px;
            white-space: pre-wrap;
            overflow:auto;
        }
        .example .value {
            color: blue;
        }    
        .call-info {
            margin: 0 0 20px 0;
        }
        #desc{
            margin: 0;
            padding: 0 0 15px 15px;
            font-size: 16px;
        }
        #desc P {
            margin: 5px 0;
            padding: 0;
            line-height: 20px;
            color: #444;
        }

        table {
            min-width: 500px;
        }
        #filter td {
            text-align: right;
        }
        #filter div.txt {
            margin: -35px 0 0 0;
        }
        .error-popup {
            position: absolute;
            top: 48px;
            text-align: center;
            background: rgb(216,67,21);
            width: 100%;
            line-height: 40px;
            color: #fff;
        }
        .error-popup a {
            font-weight: normal;
            color: #fff;
            font-size: 18px;
            display: block;
        }
        div.tags {
            color: rgb(44, 87, 119);
            user-select: none;
        }
        div.tags span {
            background: rgb(225, 236, 244);
            border-radius: 3px;
            margin: 2px 0 5px 2px;
            display: inline-block;
            cursor: pointer;
        }
        div.tags span:hover {
            background: rgb(209, 229, 241);
        }
        div.tags span.active {
            background: #428bca;
            color: #fff;
        }
        div.tags b {
            font-weight: normal;
            padding: 2px 5px;
        }
    </style>
</head>
<body>
    <a id="logo" href="https://servicestack.net" title="ServiceStack {7}"></a>
    <h1>{0}</h1>
    
    <div class="operations">
        <p>
            The following operations are supported. For a formal definition, please review the Service <a href="?xsd={1}">XSD</a>.
        </p>
        
        {2}

        <br /><h3><a href="https://docs.servicestack.net/clients-overview">Clients Overview</a></h3>  
    
        {3}

	    {4}
 
        {5}
        
        {6}
    </div>
    
    <p>&nbsp;</p>
    
    <script type="text/javascript">
        if (document.querySelectorAll) {
            var table = document.querySelectorAll("table")[0];
            if (table) {
                var cols = table.querySelectorAll("tr:first-child td").length + 1; //th
                var isIE9 = document.documentMode <= 9;
                var tagNames = []
                table.querySelectorAll('[data-tags]').forEach(function (x) {
                    Array.prototype.push.apply(tagNames,x.getAttribute('data-tags').split(','));
                });
                var tagsHtml = tagNames.filter(function(value,index,self) {
                    return value && self.indexOf(value) === index;
                }).map(function(x) { return "<span><b>" + x + "</b></span>"}).join('');
                if (tagsHtml !== "") {
                    tagsHtml = '<div class="tags">' + tagsHtml + '</div>';
                }
                var html = '<div class="txt"><input type="text" placeholder="filter" />' + tagsHtml + '</div>';
                
                if (!isIE9) {
                    table.insertAdjacentHTML("afterbegin",
                        '<thead id="filter"><tr><td colspan="' + cols + '">' + html + '</td></tr></thead>');
                } else {
                    var thead = document.createElement('thead');
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    thead.id = "filter";
                    td.innerHTML = html;
                    td.setAttribute("colspan", cols);
                    tr.appendChild(td);
                    thead.appendChild(tr);
                    table.insertBefore(thead, table.firstChild);
                }

                var tagEls = document.querySelectorAll('.tags span');
                var input = document.querySelectorAll("#filter input")[0];
                function filter() {
                    var activeTagEl = document.querySelector('.tags span.active b');
                    var activeTag = activeTagEl && activeTagEl.innerHTML;
                    
                    var rows = document.querySelectorAll("tbody tr");
                    for (var i = 0; i < rows.length; i++) {
                        var th = rows[i].firstChild;
                        var thTags = th.getAttribute('data-tags').split(',').filter(function(x){ return !!x});
                        rows[i].style.display = th.innerHTML.toLowerCase()
                            .indexOf(input.value.toLowerCase()) >= 0
                            && (!activeTag || thTags.indexOf(activeTag) >= 0)
                            ? 'block'
                            : 'none';
                    }
                }
                if (input) {
                    input.onkeyup = filter;
                }

                function selectTag() {
                    var $this = this;
                    tagEls.forEach(function(el) {
                        console.log(el, $this);
                        el.className = el === $this && $this.className !== 'active' ? 'active' : '';
                    });
                    filter();
                }
                tagEls.forEach(function(el) {
                    el.onclick = selectTag;
                });
            }
        }
    </script>

    {8}

</body>
</html>
